<template>
  <div style="border: 3px dashed darkgray">
    <el-row>
      <el-col :span="24" style="background-color: papayawhip;height: 50px;border: 2px dashed darkgray" ><div>
        <th style="padding-top: 15px;padding-left: 10px">我的地址</th>
      </div></el-col>
    </el-row>
    <el-row style="background-color: white;padding-bottom: 20px" >
      <el-row><el-col :span="3" >
        <el-button type="primary"  @click="getshow()">添加地址</el-button>
      </el-col>
      </el-row>
      <el-table :data="list"   @selection-change="handleSelectionChange " style=" height: 100%;width: 100%;background-color: papayawhip;border: 2px dashed darkgray"  :stripe="true"  >
        <el-table-column type="index" width="50">
        </el-table-column>
        <el-table-column prop="province" label="省" width="180"></el-table-column>
        <el-table-column prop="city" label="市" width="180"></el-table-column>
        <el-table-column prop="district" label="区/县" width="180"></el-table-column>
        <el-table-column prop="address" label="详细地址" width="180"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="dialogFormVisible=true;list=scope.row">编辑</el-button>
            <el-button type="primary" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="地址信息" :visible.sync="dialogFormVisible">
        <el-form :model="list">
          <el-form-item label="编号" hidden>
            <el-input v-model="list.id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="省">
            <el-input v-model="list.province" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="市">
            <el-input v-model="list.city" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="区/县">
            <el-input v-model="list.district" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="详细地址">
            <el-input v-model="list.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户编号" hidden>
            <el-input v-model="list.fuser=this.$store.state.user.list.id" autocomplete="off" ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
        </div>
      </el-dialog>
      </el-row>
  </div>
</template>

<script>
import App from "../App";
export default {
  name: "Fsite",
  components: {App},
  data(){
    return {
      list:{
        fuser:''
      },
      id:'',
      multipleSelection: [],
      dialogFormVisible: false,
    }
  },
  created() {
    let a= this.$store.state.user.list
    console.log(a)
    if (a!=null){
      this.name=this.$store.state.user.list.username;
    }
    this.id=this.$store.state.user.list.id;
    console.log("用户id"+this.id);
    this.$http.post('/fsite/select', {fuser:this.id}).then(data=>{
      console.log(data)
      this.list=data
    })
  },
  methods:{
    getshow(){
      this.dialogFormVisible= true;
    }
    ,
    getList () {
      this.$http.post('/fsite/select', {fuser:this.id}).then(data=>{
        this.list=data
        console.log(data)
      })
    },
    del (row) {
      this.$http.post('/fsite/del',{id: row.id}).then(data => {
        this.$message.success('删除成功')
        this.getList()
      })
    },
    saveOrUpdate () {
      this.dialogFormVisible = false
      this.$http.post('/fsite/upadd', this.list).then(data => {
        this.$message.success('操作成功')
        this.getList()
      })
    },
    search () {
      this.getList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
}
</script>

<style scoped>

.el-row {
  margin-bottom: 20px;}
:last-child {
  margin-bottom: 0;
}

</style>
